<template>
	<div>
		<cus-modal
			ref="modal"
			:title="form.id == '' ? '添加' : '编辑'"
			@on-visible-change="onVisibleChange"
			width="500"
			@onOk="onOk"
		>
			<Form
				ref="formValidate"
				:model="form"
				:rules="ruleValidate"
				:label-width="90"
			>
				<FormItem
					label="分类名称"
					prop="categoryName"
					:rules="[
						{
							required: true,
							message: '分类名称不能为空',
							trigger: 'blur'
						}
					]"
				>
					<Input
						v-model="form.categoryName"
						clearable
						maxlength="20"
						style="width: 270px"
						placeholder="请输入分类名称"
					></Input>
				</FormItem>
				<FormItem label="颜色区分" prop="color">
					<div style="display: flex; align-items: center">
						<ColorPicker
							class="ColorPickerStyle"
							v-model="form.colorCode"
							recommend
						/>
						<div
							style="
								height: 40px;
								width: 80px;
								display: flex;
								align-items: center;
								justify-content: center;
							"
						>
							{{ form.colorCode }}
						</div>
					</div>
				</FormItem>
			</Form>
			<Spin size="large" fix v-if="loading"></Spin>
		</cus-modal>
	</div>
</template>

<script>
import {
	saveApiProductcategory,
	updateApiProductcategory
} from '@/api/organ/dishesModule.js'

const form = {
	id: '',
	categoryName: '', // 分类名称
	colorCode: '#2D8CF0' // 颜色区分
}
export default {
	name: 'addProductCategory',
	components: {},
	data() {
		return {
			loading: false,
			ruleValidate: {},
			form
		}
	},
	mounted() {
		this.form = this.$cu.deepClone(form)
	},
	methods: {
		onVisibleChange(v) {
			this.$refs['formValidate'].resetFields()
			if (!v) this.form = this.$cu.deepClone(form)
		},
		show() {
			this.$refs['modal'].show = true
		},
		onOk() {
			this.$refs['formValidate'].validate((valid) => {
				if (valid) {
					this.loading = true
					if (this.form.id) {
						this.updateApiProductcategoryApi()
					} else {
						this.saveApiProductcategoryApi()
					}
				}
			})
		},
		// 保存商品种类-------------------接口
		saveApiProductcategoryApi() {
			this.loading = true
			return new Promise((resolve) => {
				let params = {
					categoryName: this.form.categoryName,
					colorCode: this.form.colorCode
				}
				saveApiProductcategory(params).then((res) => {
					this.loading = false
					if (res.code == 1) {
						this.$parent.onInit()
						this.$refs['modal'].show = false
						this.$Message.success('添加商品种类成功')
						resolve()
					}
				})
			})
		},
		// 校验名称
		nameCheck() {
			console.log(111)
		},
		// 修改商品种类-------------------接口
		updateApiProductcategoryApi() {
			this.loading = true
			return new Promise((resolve) => {
				let params = {
					id: this.form.id,
					categoryName: this.form.categoryName,
					colorCode: this.form.colorCode
				}
				updateApiProductcategory(params).then((res) => {
					this.loading = false
					if (res.code == 1) {
						this.$parent.onInit()
						this.$refs['modal'].show = false
						this.$Message.success('编辑分类成功')
						resolve()
					}
				})
			})
		}
	}
}
</script>

<style scoped lang="less">
.colorPicker {
	/deep/.ivu-input {
		padding: 8px 7px !important;
	}
}
.ColorPickerStyle {
	width: 270px;
	/deep/.ivu-color-picker-confirm {
		padding: 11px !important;
	}
	/deep/.ivu-color-picker-color {
		width: 230px;
	}
	/deep/ .ivu-input-icon {
		line-height: 32px !important;
	}
	/deep/.ivu-icon-ios-close {
		display: none;
	}
}
</style>
